<template>
      <div class="balloon">
            <ul>
                <li class="balloon_item">
                    <img src="../../img/suo.png" alt="">
                    <span>就业推荐</span>
                </li>
                <li  class="balloon_item">
                    <img src="../../img/shus.png" alt="">
                    <span>助学贷款</span>
                </li>
                <li  class="balloon_item">
                    <img src="../../img/ssss.png" alt="">
                    <span>免费试听</span>
                </li>
                <li  class="balloon_item">
                    <img src="../../img/ddd.png" alt="">
                    <span>在线咨询</span>
                </li>
                <li  class="balloon_item" style="font-weight: 700; font-size:16px; ">
                    <img src="../../img/jianto.png" alt="">
                    <span>TOP</span>
                    <img src="../../img/jianto.png" alt="">
                </li>
            </ul>
        </div>
</template>
<script></script>
<style lang="scss" scoped>
.balloon{
    width: 147px;
    height: 422px;
    background: url(https://itdahua.com/img/dahua_balloon1.65402c55.png);
    background-size: cover;
    background-position: 50%;
    position: fixed;
    top: 210px;
    z-index: 99999999;
     ul{
        width: 119px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        .balloon_item{
            width: 80%;
            height: 30px;
            cursor: pointer;
            color: rgb(255, 255, 255);
            font-family: 微软雅黑Regular;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: 0px auto;
        }
    }
}
</style>